<template>
  <div class="Home">
  	<div class="header-bar clear">
  		<div class="msg l">
  			<router-link :to="'/message'" >
	          <img class="icon" src="https://dummyimage.com/125x125">
	      </router-link>
  		</div>
  		<div class="msg r">
        <!-- <input type="text" v-on:click="gotoAddress('/search')" class="search"> -->
        <img class="search" v-on:click="gotoAddress('/search')" src="https://dummyimage.com/500x35">
      </div>
  	</div>
  	<div class="home-box">
      <div id="div1">
        <div id="img-box">
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497607058528&di=2816848e9283fa7513bce6c0dbe69c70&imgtype=0&src=http%3A%2F%2Fimg.sj33.cn%2Fuploads%2Fallimg%2F201210%2F2012101121161762.jpg" alt="" id="drag">

          <div id="pos1" style="display: none; position: absolute; left: 200px; top: 200px; background: #fff;">
            1111
          </div>
        </div>
      </div>
  	</div>

	<foot-guide></foot-guide>
  </div>
</template>


<script>
import footGuide from '../components/footGuide';

export default {
  name: 'Home',
  data () {
    return {
      popupVisible: false
    }
  },
  components: {
      footGuide
  },
  mounted:function(){

    var dragFn = function(){

      var drag = document.getElementById('img-box');
      var pos1 = document.getElementById('pos1');
      var startX = 0;
      var startY = 0;
      var offsetLeft = 0;
      var offsetTop = 0;
      var left = 0;
      var top1 = 0;
      //touchstart事件  
      function touchSatrtFunc(evt) {  
          //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
          var touch = evt.touches[0]; //获取第一个触点  
          var x = Number(touch.pageX); //页面触点X坐标  
          var y = Number(touch.pageY); //页面触点Y坐标  
          //记录触点初始位置  
          startX = x;  
          startY = y;  

          offsetLeft = drag.offsetLeft;
          offsetTop = drag.offsetTop;



      }  

      //touchmove事件 
      function touchMoveFunc(evt) {  
          //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
          var touch = evt.touches[0]; //获取第一个触点  
          var x = Number(touch.pageX); //页面触点X坐标  
          var y = Number(touch.pageY); //页面触点Y坐标  
          left = offsetLeft+(x - startX);
          top1 = offsetTop+(y - startY);

          if(left>0){  
                left=0;  
            }
            else if(left <window.innerWidth-drag.offsetWidth){  
                left = window.innerWidth-drag.offsetWidth;  
            }  

            
            console.log(offsetTop+(y - startY));
            console.log(window.innerHeight-drag.offsetHeight);

            if(top1>0){  
                top1=0;  
            }else if(top1 <window.innerHeight-drag.offsetHeight){ 
              console.log(1) 
                top1 = window.innerHeight-drag.offsetHeight;  
            } 

            // console.log(top);

            if(left >-400 && left <= -100){

              pos1.style.display = 'block';
            }
            else{
              pos1.style.display = 'none';  
            }
            

          if (x - startX != 0) {  
              //左右滑动 
              drag.style.left =  left+'px';
          }  
          
          if (y - startY != 0) {  
              //上下滑动
              drag.style.top =  top1+'px';  
          }  

          
      }  

      drag.addEventListener("touchstart", touchSatrtFunc);
      drag.addEventListener("touchmove", touchMoveFunc);
      drag.addEventListener("touchend", function(){


        

      });

      var eventFn = function (event) {
          event.preventDefault();
      }
      document.body.addEventListener('touchmove', eventFn,false);

      document.body.removeEventListener('touchend', eventFn,false);


    }

    dragFn();
    
  },
  methods: {

    gotoAddress(path){
      this.$router.push(path)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

html,body{ position: absolute; width: 100%; height: 100%; margin: 0px; padding: 0px;}
#div1{ width: 100%; height: 500px; position: relative; overflow: hidden;}
#img-box{width: 800px; height: 800px; position: absolute; left: -100px; top: -100px;}
#div1 img{ position: absolute; left: 0; top: 0; height: 800px;  }

.header-bar{ padding: .33rem 0; background: red; }
.header-bar .icon { width: 1rem; height: 1rem; }
.header-bar .l{ width: 15%; text-align: center;}
.header-bar .r{ width: 85%; text-align: center;}
.header-bar .search{ width: 90%; height: 1rem;  border: 1px solid #fff; }
.mint-popup-3 {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.mint-popup-3 .mint-button {
  position: absolute;
  width: 90%;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
}
</style>
